<template>
	<page-wrapper :page-path="'/pages/user/user'" navTitle="我的" :navLeft="'none'" :navBackgroundColor="primaryColor"
		:navTitleStyle="navTitleStyle" :showNavbar="false">
		<view class="user-container">
			<!-- 顶部装饰波浪 -->
			<!-- <view class="wave-box">
				<image class="wave wave-1" src="/static/images/wave-1.png" mode="scaleToFill"></image>
				<image class="wave wave-2" src="/static/images/wave-2.png" mode="scaleToFill"></image>
			</view> -->

			<!-- 头部用户信息 -->
			<view class="header" @click="navigateTo('/pages/user-info/user-info')">
				<view class="avatar-container">
					<image class="avatar" :src="userInfo.avatar || '/static/images/default-avatar.png'"
						mode="aspectFill"></image>
					<!-- 添加光晕效果 -->
					<view class="avatar-halo"></view>
				</view>
				<view class="user-info">
					<view class="username-container">
						<text class="username-prefix">Hi,</text>
						<text class="username" :class="[
							userInfo.roleId === 1 ? 'super-vip-member' :
								userInfo.roleId === 2 ? 'vip-member' : 'normal-member'
						]">{{ userInfo.username || '未登录用户' }}</text>
						<view class="username-decoration">
							<view class="sparkle sparkle-1"></view>
							<view class="sparkle sparkle-2"></view>
							<view class="sparkle sparkle-3"></view>
						</view>
					</view>
					<view class="user-level-container">
						<view class="user-level" :class="[
							userInfo.roleId === 1 ? 'super-vip-level' :
								userInfo.roleId === 2 ? 'vip-level' : 'normal-level'
						]">
							<image src="@/static/svg/vip.svg" mode="widthFix" style="width: 30rpx; margin-right: 10rpx;"></image>
							{{
							userInfo.roleId === 1 ? '超级VIP' :
								userInfo.roleId === 2 ? 'VIP用户' : '普通用户'
						}}
						</view>
						<view class="level-progress">
							<view class="level-progress-bar" :style="{
								width: userInfo.roleId === 1 ? '100%' : userInfo.roleId === 2 ? '70%' : '35%',
								background: userInfo.roleId === 1 ? 'linear-gradient(to right, #FF5A5F, #FF3B30)' :
									userInfo.roleId === 2 ? 'linear-gradient(to right, #FF9500, #FFCC00)' :
										'linear-gradient(to right, #8E8E93, #C7C7CC)'
							}"></view>
						</view>
					</view>
				</view>
			</view>

			<!-- 数据概览卡片 -->
			<view class="stats-card">
				<view class="stat-item">
					<text class="stat-value">{{ statsData.totalCount || 0 }}</text>
					<text class="stat-label">总记账</text>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<text class="stat-value">{{ statsData.totalDays || 0 }}天</text>
					<text class="stat-label">记账天数</text>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<text class="stat-value">{{ statsData.consecutiveDays || 0 }}天</text>
					<text class="stat-label">连续记账</text>
				</view>
			</view>

			<!-- 功能快捷入口 -->
			<view class="quick-access">
				<view class="quick-item" @click="navigateTo('/pages/bills/bills')">
					<view class="quick-icon">
						<uni-icons type="calendar" size="28" color="#5E81F4"></uni-icons>
					</view>
					<text class="quick-text">账单明细</text>
				</view>
				<view class="quick-item" @click="navigateTo('/pages/budget/budget')">
					<view class="quick-icon">
						<uni-icons type="wallet" size="28" color="#F5A623"></uni-icons>
					</view>
					<text class="quick-text">预算管理</text>
				</view>
				<view class="quick-item" @click="navigateTo('/pages/chart/chart')">
					<view class="quick-icon">
						<image src="@/static/svg/dataAnalysis.svg" mode="widthFix" style="width: 60rpx;"></image>
						<!-- <uni-icons type="chart" size="28" color="#4CAF50"></uni-icons> -->
					</view>
					<text class="quick-text">数据分析</text>
				</view>
				<view class="quick-item" @click="navigateTo('/pages/assets/assets')">
					<view class="quick-icon">
						<uni-icons type="star" size="28" color="#9C27B0"></uni-icons>
					</view>
					<text class="quick-text">资产管理</text>
				</view>
			</view>

			<!-- 菜单列表 - 添加scroll-view -->
			<scroll-view scroll-y="true" show-scrollbar="true" enhanced="true" class="menu-scroll-view">
				<view class="menu-container">
					<view class="menu-section">
						<view class="section-title">账户管理</view>

						<view class="menu-item" @click="navigateTo('/pages/user-info/user-info')">
							<view class="menu-icon">
								<uni-icons type="person" size="24" color="#5E81F4"></uni-icons>
							</view>
							<text class="menu-text">个人信息</text>
							<uni-icons type="right" size="16" color="#999"></uni-icons>
						</view>

						<view class="menu-item" @click="navigateTo('/pages/security/security')">
							<view class="menu-icon">
								<uni-icons type="locked" size="24" color="#F5A623"></uni-icons>
							</view>
							<text class="menu-text">账户安全</text>
							<uni-icons type="right" size="16" color="#999"></uni-icons>
						</view>
					</view>

					<view class="menu-section">
						<view class="section-title">系统设置</view>

						<view class="menu-item" @click="navigateTo('/pages/category/category')">
							<view class="menu-icon">
								<uni-icons type="list" size="24" color="#4CAF50"></uni-icons>
							</view>
							<text class="menu-text">分类管理</text>
							<uni-icons type="right" size="16" color="#999"></uni-icons>
						</view>

						<view class="menu-item" @click="navigateTo('/pages/platform/platform')">
							<view class="menu-icon">
								<uni-icons type="gear" size="24" color="#9C27B0"></uni-icons>
							</view>
							<text class="menu-text" @click="navigateTo('/pages/platform/platform')">平台管理</text>
							<uni-icons type="right" size="16" color="#999"></uni-icons>
						</view>

						<view class="menu-item" @click="navigateTo('/pages/theme/theme')">
							<view class="menu-icon">
								<uni-icons type="color" size="24" color="#FF9800"></uni-icons>
							</view>
							<text class="menu-text">主题设置</text>
							<view class="menu-extra">
								<view class="theme-preview" :style="{ backgroundColor: primaryColor }"></view>
							</view>
							<uni-icons type="right" size="16" color="#999"></uni-icons>
						</view>
					</view>

					<view class="menu-section">
						<view class="section-title">关于我们</view>

						<view class="menu-item" @click="navigateTo('/pages/about/about')">
							<view class="menu-icon">
								<uni-icons type="info" size="24" color="#607D8B"></uni-icons>
							</view>
							<text class="menu-text">关于猪猪存钱罐</text>
							<view class="menu-extra">
								<text class="version-text">v1.0.0</text>
							</view>
							<uni-icons type="right" size="16" color="#999"></uni-icons>
						</view>

						<view class="menu-item" @click="navigateTo('/pages/feedback/feedback')">
							<view class="menu-icon">
								<uni-icons type="help" size="24" color="#607D8B"></uni-icons>
							</view>
							<text class="menu-text">意见反馈</text>
							<uni-icons type="right" size="16" color="#999"></uni-icons>
						</view>
					</view>

					<view class="logout-section">
						<view class="logout-btn" @click="handleLogout">退出登录</view>
					</view>

					<!-- 添加额外空间以确保有足够内容可滚动 -->
					<view style="height: 80rpx;"></view>
				</view>
			</scroll-view>

			<!-- 确认退出弹窗 -->
			<uni-popup ref="logoutPopup" type="center" @change="popupChange" style="z-index: 999;">
				<view class="popup-content">
					<view class="popup-title">确认退出</view>
					<view class="popup-message">确定要退出登录吗？</view>
					<view class="popup-btns">
						<button class="popup-btn cancel" @click="closeLogoutPopup">取消</button>
						<button class="popup-btn confirm" @click="confirmLogout">确认</button>
					</view>
				</view>
			</uni-popup>
		</view>
	</page-wrapper>
</template>

<script>
	import {
		logout
	} from '@/api/apis.js';
	import {
		themeMixin
	} from '@/utils/theme.js';
	import PageWrapper from '@/components/page-wrapper/page-wrapper.vue';
	import {
		getAccountingStatistics
	} from '@/api/statistics.js';
	// 导入用户状态管理
	import {
		useUserStore
	} from '@/store/userStore.js';

	export default {
		components: {
			PageWrapper
		},
		mixins: [themeMixin], // 混入主题工具
		data() {
			return {
				userInfo: {
					id: null,
					username: '',
					nickname: '',
					avatar: '',
					email: '',
					roleId: null
				},
				navTitleStyle: {
					color: '#FFFFFF'
				},
				// 统计数据
				statsData: {
					totalCount: 0,
					totalDays: 0,
					consecutiveDays: 0
				}
			}
		},
		onLoad() {
			this.getUserData();
			this.fetchUserStats();
		},
		methods: {
			// 获取用户数据
			async getUserData() {
				try {
					uni.showLoading({
						title: '加载中...',
						mask: true
					});

					// 使用 Pinia store 的 fetchUserInfo 方法获取用户数据
					const userStore = useUserStore();
					const userData = await userStore.fetchUserInfo();

					if (userData) {
						this.userInfo = userData;
						console.log('获取用户数据成功');
					} else {
						console.warn('获取用户数据失败');
						uni.showToast({
							title: '获取用户信息失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取用户数据失败:', error);
					uni.showToast({
						title: '获取用户信息失败',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},

			// 获取用户统计数据
			async fetchUserStats() {
				try {
					const res = await getAccountingStatistics();
					if (res.data.code === 200) {
						this.statsData = res.data.data;
					} else {
						uni.showToast({
							title: res.msg || '获取统计数据失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取统计数据失败:', error);
					uni.showToast({
						title: '获取统计数据失败',
						icon: 'none'
					});
				}
			},

			// 页面导航
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},

			// 处理退出登录
			handleLogout() {
				this.$refs.logoutPopup.open();
			},

			// 弹窗状态变化
			popupChange(e) {
				// 弹窗关闭时的处理
			},

			// 关闭退出弹窗
			closeLogoutPopup() {
				this.$refs.logoutPopup.close();
			},

			// 确认退出登录
			async confirmLogout() {
				try {
					// 调用退出登录接口
					const res = await logout();

					// 清除 Pinia 中的用户状态
					const userStore = useUserStore();
					userStore.logout();

					// 显示退出成功提示
					uni.showToast({
						title: '退出成功',
						icon: 'success',
						duration: 2000
					});

					// 延迟跳转到登录页
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}, 1000);

				} catch (error) {
					console.error('退出登录失败:', error);

					// 清除 Pinia 中的用户状态
					const userStore = useUserStore();
					userStore.logout();

					uni.showToast({
						title: '已退出登录',
						icon: 'none',
						duration: 2000
					});

					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}, 1000);
				}
			}
		}
	}
</script>

<style lang="scss">
	.user-container {
		position: relative;
		display: flex;
		flex-direction: column;
		// background-color: $background-color;
		padding-top: 100rpx;
		min-height: 100%;
		background: #FFD84D;
		background: linear-gradient(172deg, rgba(255, 216, 77, 1) 0%, rgba(255, 227, 125, 1) 15%, rgba(255, 255, 255, 1) 50%);


		// 波浪装饰
		.wave-box {
			width: 100%;
			height: 220rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
			overflow: hidden;
			background-color: $primary-color;

			.wave {
				width: 200%;
				/* 宽度设为200%以便有足够空间移动 */
				height: 100rpx;
				z-index: 2;
				position: absolute;
				bottom: -10rpx;
				left: 0;
			}

			.wave-1 {
				opacity: 1;
				animation: wave-animation 10s infinite linear;
			}

			.wave-2 {
				opacity: 0.8;
				animation: wave-animation 7s infinite linear reverse;
				/* 反向动画，速度不同 */
			}
		}

		// 头部用户信息
		.header {
			margin-top: 20rpx;
			padding: 40rpx;
			display: flex;
			align-items: center;
			position: relative;
			z-index: 2;

			.avatar-container {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				margin-right: 30rpx;
				box-shadow: $shadow-medium;
				position: relative;
				overflow: visible;

				.avatar {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					background-color: #f0f0f0;
					position: relative;
					z-index: 2;
				}

				.avatar-halo {
					position: absolute;
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					background: radial-gradient(circle, rgba($primary-color, 0.6) 0%, rgba($primary-color, 0) 70%);
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 1;
					animation: pulse 3s infinite alternate;
				}
			}

			.user-info {
				display: flex;
				flex-direction: column;
				flex: 1;

				.username-container {
					display: flex;
					align-items: baseline;
					position: relative;
					margin-bottom: 16rpx;

					.username-prefix {
						font-size: 36rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 0.9);
						margin-right: 10rpx;
						text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
					}

					.username {
						font-size: 48rpx;
						font-weight: bold;
						color: #FFFFFF;
						text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
						letter-spacing: 1px;
						position: relative;
						z-index: 2;

						&.normal-member {
							background: linear-gradient(to right, #8E8E93, #C7C7CC);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						&.vip-member {
							background: linear-gradient(to right, #FF9500, #FFCC00);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						&.super-vip-member {
							background: linear-gradient(to right, #FF5A5F, #FF3B30);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							position: relative;

							&::after {
								content: '';
								position: absolute;
								top: -5rpx;
								right: -15rpx;
								width: 24rpx;
								height: 24rpx;
								background-size: contain;
								background-repeat: no-repeat;
							}
						}
					}

					.username-decoration {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						z-index: 1;
						pointer-events: none;

						.sparkle {
							position: absolute;
							width: 10rpx;
							height: 10rpx;
							background-color: #FFFFFF;
							border-radius: 50%;
							opacity: 0;

							&.sparkle-1 {
								top: 10%;
								left: 70%;
								animation: sparkle 2s infinite 0.2s;
							}

							&.sparkle-2 {
								top: 50%;
								left: 85%;
								animation: sparkle 2s infinite 0.7s;
							}

							&.sparkle-3 {
								top: 80%;
								left: 60%;
								animation: sparkle 2s infinite 1.2s;
							}
						}
					}
				}

				.user-level-container {
					display: flex;
					flex-direction: column;

					.user-level {
						font-size: $font-size-small;
						color: rgba(255, 255, 255, 0.9);
						padding: 4rpx 16rpx;
						border-radius: 20rpx;
						max-width: 160rpx;
						margin-bottom: 8rpx;
						position: relative;
						overflow: hidden;
						text-align: center;
						display: flex;
						align-items: center;

						&.normal-level {
							background-color: rgba(142, 142, 147, 0.2);
						}

						&.vip-level {
							background-color: rgba(255, 149, 0, 0.3);
							border: 1rpx solid rgba(255, 149, 0, 0.6);
						}

						&.super-vip-level {
							background-color: rgba(255, 90, 95, 0.3);
							border: 1rpx solid rgba(255, 90, 95, 0.6);
						}

						&::after {
							content: '';
							position: absolute;
							top: 0;
							left: -100%;
							width: 50%;
							height: 100%;
							background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
							animation: shine-level 2s infinite;
						}
					}

					.level-progress {
						width: 200rpx;
						height: 6rpx;
						background-color: rgba(255, 255, 255, 0.3);
						border-radius: 3rpx;
						overflow: hidden;

						.level-progress-bar {
							height: 100%;
							border-radius: 3rpx;
							position: relative;

							&::after {
								content: '';
								position: absolute;
								top: 0;
								right: 0;
								width: 10rpx;
								height: 100%;
								background-color: rgba(255, 255, 255, 0.8);
								border-radius: 50%;
								box-shadow: 0 0 10rpx rgba(255, 255, 255, 0.5);
								animation: pulse-dot 2s infinite;
							}
						}
					}
				}
			}
		}

		// 数据概览卡片
		.stats-card {
			margin: 0 30rpx;
			margin-top: 20rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			box-shadow: $shadow-small;
			display: flex;
			justify-content: space-around;
			padding: 30rpx 0;
			position: relative;
			z-index: 2;

			.stat-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex: 1;

				.stat-value {
					font-size: 38rpx;
					font-weight: bold;
					color: $text-color;
					margin-bottom: 10rpx;
				}

				.stat-label {
					font-size: $font-size-small;
					color: $text-color-light;
				}
			}

			.stat-divider {
				width: 1px;
				background-color: $border-color;
				height: 60rpx;
				align-self: center;
			}
		}

		// 功能快捷入口
		.quick-access {
			margin: 30rpx;
			display: flex;
			justify-content: space-between;
			position: relative;
			z-index: 2;

			.quick-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 150rpx;

				.quick-icon {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					background-color: rgba(255, 255, 255, 0.9);
					display: flex;
					justify-content: center;
					align-items: center;
					box-shadow: $shadow-small;
					margin-bottom: 16rpx;
				}

				.quick-text {
					font-size: $font-size-small;
					color: $text-color;
					text-align: center;
				}
			}
		}

		// 添加滚动视图样式
		.menu-scroll-view {
			// flex: 1;
			height: calc(100vh - 800rpx);
			z-index: 2;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			box-shadow: $shadow-small;
			margin-top: 20rpx;
		}

		// 菜单列表
		.menu-container {
			padding: 20rpx 30rpx;
			z-index: 2;

			.menu-section {
				margin-bottom: 30rpx;

				.section-title {
					font-size: $font-size-small;
					color: $text-color-light;
					padding: 20rpx 10rpx 10rpx;
				}
			}

			.menu-item {
				display: flex;
				align-items: center;
				padding: 30rpx 20rpx;
				border-radius: 16rpx;
				margin-bottom: 16rpx;
				// box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

				.menu-icon {
					width: 60rpx;
					height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 30rpx;
				}

				.menu-text {
					flex: 1;
					font-size: $font-size-medium;
					color: $text-color;
				}

				.menu-extra {
					margin-right: 20rpx;

					.version-text {
						font-size: $font-size-small;
						color: $text-color-lighter;
					}

					.theme-preview {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
					}
				}
			}

			.logout-section {
				margin-top: 60rpx;
				display: flex;
				justify-content: center;

				.logout-btn {
					width: 80%;
					padding: 15rpx 50rpx;
					background-color: #FFFFFF;
					color: $primary-orange;
					font-size: $font-size-medium;
					font-weight: bold;
					border-radius: 50rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1rpx solid $primary-orange;
				}
			}
		}

		// 弹窗样式
		.popup-content {
			width: 600rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 40rpx;

			.popup-title {
				font-size: $font-size-large;
				font-weight: bold;
				color: $text-color;
				text-align: center;
				margin-bottom: 30rpx;
			}

			.popup-message {
				font-size: $font-size-medium;
				color: $text-color-light;
				text-align: center;
				margin-bottom: 40rpx;
			}

			.popup-btns {
				display: flex;
				justify-content: space-between;

				.popup-btn {
					width: 45%;
					height: 80rpx;
					border-radius: $border-radius;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: $font-size-medium;

					&.cancel {
						background-color: #f5f5f5;
						color: $text-color;
					}

					&.confirm {
						background-color: #FF5A5F;
						color: #fff;
					}
				}
			}
		}
	}

	// 添加新的动画
	@keyframes pulse {
		0% {
			transform: translate(-50%, -50%) scale(0.95);
			opacity: 0.6;
		}

		100% {
			transform: translate(-50%, -50%) scale(1.05);
			opacity: 0.8;
		}
	}

	@keyframes shine {
		0% {
			background-position: -200% 0;
		}

		100% {
			background-position: 200% 0;
		}
	}

	@keyframes sparkle {
		0% {
			transform: scale(0);
			opacity: 0;
		}

		50% {
			transform: scale(1.5);
			opacity: 0.8;
		}

		100% {
			transform: scale(0);
			opacity: 0;
		}
	}

	@keyframes shine-level {
		0% {
			left: -100%;
		}

		100% {
			left: 200%;
		}
	}

	@keyframes pulse-dot {
		0% {
			opacity: 0.6;
		}

		50% {
			opacity: 1;
		}

		100% {
			opacity: 0.6;
		}
	}

	@keyframes wave-animation {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-50%);
		}

		/* 移动半个宽度，因为图片宽度是200% */
	}
</style>